<!DOCTYPE HTML>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <title>Powerful JQuery Plugins</title>
    <link href="/js/jQueryUI/jquery-ui.css" type="text/css" rel="stylesheet"></link>
    <link href="/js/jQueryScrollbar/perfect-scrollbar.css" type="text/css" rel="stylesheet"></link>
  	<style type="text/css">
  		.container {
  			/* 
  				最好设置一个固定的宽度，
  				因为块级元素默认100%的宽度
  				将导致无法居中
  			*/
  			width: 80%;
  			min-width: 1024px;
  			margin: 0 auto;
  			background-color: purple;
  		}
  		.header, .main, .footer {
  			/* 
  				父级元素的宽度
  			*/
  			width: 100%;
  		}
  		.header {
  			background-color: orange;
  		}
  		.main {
  			overflow: hidden;
  			background-color: turquoise;
  			/* 
  				clear: both用于紧邻后面的元素清除浮动
  			*/
  			clear: both;
  			height: 508px;
  		}
  		.main > .mainLeft {
  			width: 68%;
  			height: 500px;
  			background-color: whitesmoke;
  			float: left;
  			margin: 2px 1%;
  		}
  		/* 
  			一般不设置高度,设置float:right同样可以出现边距
  		*/
  		.main > .mainRight {
  			width: 28%;
  			height: 500px;
  			background-color: blue;
  			float: left;
  			margin: 2px 1%;
  		}
  		.footer {
  			background-color: black;
  			color: turquoise;
  			clear: both;
  		}
  	</style>
  </head>
  
  <body>
  	<div class="container">
  		<div class="header">头部</div>
  		<div class="main">
  			<div class="mainLeft"></div>
  			<div class="mainRight"></div>
  		</div>
  		<div class="footer">版权部分</div>
  	</div>
    <script src="/js/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <script src="/js/jQueryUI/jquery-ui.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/jquery.validate.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/messages_zh.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryValidation/additional-methods.js" type="text/javascript"></script>
    <script src="/js/jQueryScrollbar/perfect-scrollbar.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            console.info("Dom元素加载完毕！");
        });
    </script>
  </body>
</html>